<template>
  <div id="map" :style="{height:height}" />
</template>

<script>
import styleJson from '@/utils/mapStyleJson'
import build from '@/assets/positoin.png'
export default {
  name: 'EcharsMap',
  props: {
    points: {
      // 经纬度
      type: Array,
      default: () => []
    },
    height: {
      // 自定义地图高度
      type: String,
      default: '700px'
    }
  },
  data() {
    return {
      map: null, // 地图实例
      mapvgl: null,
      pointList: [],
      infoWindow: null
    }
  },
  watch: {
    // 根据传入坐标的经纬度创建图片
    points: {
      handler(values) {
        values.forEach((item) => {
          const { lon, lat } = item
          this.pointList.push({
            geometry: {
              type: 'Point', // 样式为点
              coordinates: [lon, lat] // 点在地图中的经纬度
            },
            color: '#f00',
            // 圆的半径
            size: 4,
            tag: item // 点的信息，用于后面实现点击标的点弹窗在弹窗中显示详细信息
          })
        })
        const waveLayer = new mapvgl.CircleLayer({
          // 绘制带波纹扩散的圆
          type: 'wave',
          // 扩散半径，支持直接设置和回调两种形式
          radius: 15,
          // 周期影响扩散速度，越小越快
          duration: 1 / 3,
          // 拖尾影响波纹数，越大越多
          trail: 4,
          enablePicked: true,
          autoSelect: true,
          onClick: (e) => { // 点击事件
            if (this.map.infowindow) this.map.infowindowclose()
            if (e.dataItem) {
              console.log(e.dataItem)
              const {
                geometry,
                tag: { proName, proNum }
              } = e.dataItem
              const opts = {
                width: 0, // 信息窗口宽度
                height: 0, // 信息窗口高度
                title: proName // 信息窗口标题
              }

              const htmlWindow = `
                  <div style="font-size:14px;" class='popup'>
                    <p>项目编号：${proNum}</p>
                  </div>
                `
              const bPoint = new BMapGL.Point(
                geometry.coordinates[0],
                geometry.coordinates[1]
              )
              this.infoWindow = new BMapGL.InfoWindow(htmlWindow, opts)

              this.map.openInfoWindow(this.infoWindow, bPoint)
            }
          }
        })
        this.mapvgl.addLayer(waveLayer)
        waveLayer.setData(this.pointList)
      },
      deep: true
    }
  },
  mounted() {
    // 创建地图
    this.map = new BMapGL.Map('map', { enableMapClick: false })
    // 设置地图初始化显示位置
    this.map.centerAndZoom('石家庄市', 10)
    // 缩放地图
    this.map.enableScrollWheelZoom(true)
    this.map.setMapStyleV2({ styleJson: styleJson })
    this.madeBoundary()
    this.mapvgl = new mapvgl.View({
      map: this.map
    })
  },
  methods: {
    // 设置区域
    madeBoundary() {
      const datas = [
        '桥西区-#cd6938',
        '新华区-#58b4cb',
        '裕华区-#19ae00',
        '石家庄市长安区-#fe44ff',
        '井陉矿区-#8e69ff',
        '藁城区-#ffff33',
        '鹿泉区-#feff99',
        '栾城区-#feb5fe',
        '井陉县-#feb431',
        '正定县-#c7b434',
        '行唐县-#fe68ff',
        '灵寿县-#c7ff00',
        '高邑县-#c9b4f9',
        '深泽县-#ffb69c',
        '赞皇县-#8eb400',
        '无极县-#c769ff',
        '平山县-#22b4ff',
        '元氏县-#20fffe',
        '赵县-#ff6833',
        '晋州市-#59fe01',
        '新乐市-#8efeff',
        '辛集市-#90b4fe']
      const bdary = new BMapGL.Boundary()
      /* bdary.get('石家庄市', (rs) => { // 获取行政区域
          this.map.clearOverlays() // 清除地图覆盖物
          // 网上查了下，东西经南北纬的范围
          var EN_JW = '180, 90;' // 东北角
          var NW_JW = '-180,  90;' // 西北角
          var WS_JW = '-180, -90;' // 西南角
          var SE_JW = '180, -90;' // 东南角
          // 4.添加环形遮罩层
          const ply1 = new BMapGL.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, { strokeColor: 'none', fillColor: 'rgb(246,246,246)', fillOpacity: 1, strokeOpacity: 0.5 }) // 建立多边形覆盖物
          this.map.addOverlay(ply1)
        })*/
      for (let i = 0; i < datas.length; i++) {
        this.getBoundary(datas[i], bdary)
      }
    },
    getBoundary(data, bdary) {
      data = data.split('-')
      bdary.get(data[0], (rs) => { // 获取行政区域
        const count = rs.boundaries.length // 行政区域的点有多少个
        for (let i = 0; i < count; i++) {
          const ply = new BMapGL.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: '#21488a', fillOpacity: 0.4, fillColor: data[1], zIndex: 2 }) // 建立多边形覆盖物
          this.map.addOverlay(ply) // 添加覆盖物
        }
      })
    }
  }
}
</script>

